﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //给全选绑定单击事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").attr("checked", true);
            });
            //给不全选绑定单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").attr("checked", false);
            });

            //给反选绑定单击事件
            $("#checkedRevBtn").click(function () {
                // 查询全部的球类复选框
                $(":checkbox[name ='items']").each(function (){
                    // 在each遍历的function函数中，有一个this对象，这个this对象时【当前正在遍历到的dom对象】
                    this.checked = !this.checked; //checked 是布尔型
                });

                //判断是否满选， 满选了就把全选也选上
                var checkboxCounts = $(":checkbox[name ='items']").length;
                var checkedCounts = $(":checkbox[name ='items']:checked").length;

                // if(checkboxCounts == checkedCounts){
                //     $("#checkedAllBox").prop("checked",true);
                // }else {
                //     $("#checkedAllBox").prop("checked",false);
                // }

                $("#checkedAllBox").prop("checked", checkedCounts == checkboxCounts);
            });

            //给提交按钮绑定单击事件
            $("#sendBtn").click(function (){
               //获取所有选中的复选框,并遍历
               $(":checkbox[name='items']:checked").each(function (){
                  alert(this.value);
               });
            });

            //给全选/全不选绑定单击事件
            $("#checkedAllBox").click(function (){
                // 在事件的function函数中， 有一个this对象， 这个this对象时当前正在响应事件的dom对象
                // alert(this.checked);

                $(":checkbox[name='items']").prop("checked",this.checked);
            });

            //给全部球类绑定单击事件
            $(":checkbox[name='items']").click(function (){

                //判断是否满选， 满选了就把全选也选上
                var checkboxCounts = $(":checkbox[name ='items']").length; //框的总个数
                var checkedCounts = $(":checkbox[name ='items']:checked").length; //已选择框的个数

                // if(checkboxCounts == checkedCounts){
                //     $("#checkedAllBox").prop("checked",true);
                // }else {
                //     $("#checkedAllBox").prop("checked",false);
                // }

                $("#checkedAllBox").prop("checked", checkedCounts == checkboxCounts);
            });
        });

    </script>
</head>
<body>

<form method="post" action="">

    你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    <br/>
    <input type="button" id="checkedAllBtn" value="全　选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反　选"/>
    <input type="button" id="sendBtn" value="提　交"/>
</form>

</body>
</html>